<template>
  <div class="login-container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form class="login-form" :rules="rules" :model="loginForm" ref="loginForms">
          <h1>Hello~~~</h1>
          <h2>欢迎回来！</h2>
          <el-form-item prop="username">
            <el-input prefix-icon="user" v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="lock" type="password" show-password v-model="loginForm.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" @click="login(loginForms)" class="login-btn" type="primary" size="default">登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { LoginFormData } from '@/api/user/types';
import { FormInstance, FormRules } from 'element-plus';

const loginForm = reactive<LoginFormData>({ username: 'admin', password: '111111' });
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const loading = ref(false);
const loginForms = ref<FormInstance>();

const rules = reactive<FormRules<LoginFormData>>({
  username: [
    { required: true, message: '用户名不能为空', trigger: 'change' },
    {
      pattern: /^[a-zA-Z]+[a-zA-Z0-9_*]*$/,
      message: '必须是字母开头，可以包含数字、字母、*和_',
      trigger: 'change',
    },
    {
      min: 4,
      max: 16,
      message: '用户名长度在4到16个字符之间',
      trigger: 'change',
    },
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'change' },
    { min: 6, message: '密码长度至少6个字符', trigger: 'change' },
  ],
});

const login = async (formEle: FormInstance | undefined) => {
  if (!formEle) return;

  await formEle.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      try {
        await userStore.userLogin(loginForm);

        const redirect: any = route.query.redirect;
        router.push({ path: redirect || '/' });

        ElNotification({
          type: 'success',
          message: '欢迎回来！',
          title: `Hi，${getTime()}好`,
        });
        loading.value = false;
      } catch (error) {
        loading.value = false;
        ElNotification({
          type: 'error',
          message: (error as Error).message,
        });
      }
    } else {
      ElNotification({
        type: 'error',
        message: '错误提交',
      });
    }
  });
};
</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;

  .login-form {
    position: relative;
    width: 80%;
    top: 30vh;
    background: url('@/assets/images/login_form.png') no-repeat;
    background-size: cover;
    padding: 40px;

    h1 {
      color: white;
      font-size: 40px;
    }
    h2 {
      color: white;
      font-size: 20px;
      margin: 20px 0;
    }
    .login-btn {
      width: 100%;
    }
  }
}
</style>
